<template>
  <div class="blog-list-box">
    <div>
      <h2 style="margin-top:8px">博客</h2>
    </div>
    <div class="blog-list">
      <List item-layout="vertical">
        <div class="blog-click-box" @click="displayBlog(item.id)" v-for="item in blogs" :key="item.id" v-show="item.display==1">
        <ListItem  class="blog-box"  >
          <ListItemMeta :title="item.title" :description="item.time" />
          {{ item.sketch }}
          <template slot="action">
              <el-tag type="warning">{{ item.class }}</el-tag>
            </template>
          <!-- <template slot="extra">
            <img
              src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large"
              style="width: 280px"
            />
          </template> -->
        </ListItem>
        </div>
      </List>
    </div>
    <p style="font-weight:bolder;font-size:18px;margin-bottom:8px">......</p>
  </div>
</template>

<style scoped>
.blog-list-box {
  width: 740px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 3px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}


.blog-list {
  text-align: left;
}

.blog-click-box:hover{
  cursor: pointer;
}

.blog-box {
  background: rgba(255, 255, 255, 0.664);
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}
</style>

<script>
export default {
  name: "TinyBlogs",
  data() {
    return {
      blogs: [
        {
          id:1,
          title: "www.吴钊颖是混蛋.com",
          time: "2020-10-25",
          sketch: "内容",
          class:"计算机",
          display:1
        },
        {
          id:2,
          title: "This is title 2",
          time: "2020-10-25",
          sketch: "内容",
          class:"计算机",
          display:0
          },
        {
          id:3,
          title: "This is title 2",
          time: "2020-10-25",
          sketch: "内容",
          class:"日常",
          display:1
        },
        {
          id:4,
          title: "This is title 2",
          time: "2020-10-25",
          sketch: "内容",
          class:"日常",
          display:1
        },
        {
          id:5,
          title: "This is title 2",
          time: "2020-10-25",
          sketch: "内容",
          class:"其他",
          display:1
        },
        {
          id:6,
          title: "This is title 2",
          time: "2020-10-25",
          sketch: "内容",
          class:"其他",
          display:1
        }
      ]
    };
  },created:function(){
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 0
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log(res.data.blogs);
        that.blogs = res.data.blogs;
         for(var i=0;i<res.data.classes.length;i++){
          that.blogs[i].class=res.data.classes[i];
        }
      },
      function(res) {
        console.log(res);
        console.log("啊呀，getTinyBlogs出错啦");
      }
    );
  },
  methods: {
    displayBlog(id) {
      this.$router.push({path:"/blogDisplay",query:{id:id}});
      console.log(id);
    }
  }
};
</script>